{% extends "admin/admin_base.html" %}
{% load static %}
{% block content-area %}

<head>
    <link rel="stylesheet" href="{% static 'css/setting.css' %}">
</head>

<div class="card">
  <header class="card-header">
      <div class="model__content">
          <h2><span>Settings</span></h2>
      </div>
  </header>

  <div class="card-content model__content ">
      <div class="field is-horizontal bordered-row ">

          <div class="tooltip-content column is-3 mb0">
              <label class="label column is-3 mb0">Embedding</label>
              <div class="help-tip">
                  <p>Something about embedding explanation</p>
              </div>
          </div>


          <div class="control column is-narrow">
              <div class="select">
                  <select v-model="embedding">
                    <option value="1">Glove (default)</option>
                    <option value="2">Word2Vec</option>
                    <option value="3">FastText</option>
                    <option value="4">Bert</option>
                    <option value="5">Elmo</option>
                    <option value="6">GPT</option>
                  </select>
              </div>
          </div>
      </div>
      <div class="field is-horizontal bordered-row tooltip-content">

          <div class="tooltip-content column is-3 mb0">
              <label class="label column is-3 mb0">Recommendation</label>
              <div class="help-tip">
                  <p>Something about recommendation explanation</p>
              </div>
          </div>

          <div class="is-narrow">
              <input class="is-checkradio" type="checkbox" id="nounchunk" value="nounchunk" v-model="nounchunk">
              <label for="nounchunk"><kbd>Noun Chunk</kbd></label>
          </div>
          <div class="is-narrow">
              <input class="is-checkradio" type="checkbox" id="onlinelearning" value="onlinelearning" v-model="onlinelearning">
              <label for="onlinelearning"><kbd>Online Learning</kbd></label>
          </div>
          <div class="is-narrow">
              <input class="is-checkradio" type="checkbox" id="history" value="history" v-model="history">
              <label for="history"><kbd>Dictionary Match</kbd></label>
          </div>
      </div>

      <div id="activesetting">
          <div class="field is-horizontal bordered-row tooltip-content">

              <div class="tooltip-content column is-3 mb0">
                  <label class="label column is-12 mb0">Active learning</label>
                  <div class="help-tip">
                      <p>Something about active learning type explanation</p>
                  </div>
              </div>

              <div class="is-narrow">
                  <input class="active is-checkradio" type="radio" id="random" :value="1" v-model="active" :disabled="activeset">
                  <label for="random"><kbd>Random</kbd></label>
              </div>
              <div class="is-narrow">
                  <input class="active is-checkradio" type="radio" id="mnlp" :value="2" v-model="active" :disabled="activeset">
                  <label for="mnlp"><kbd>MNLP</kbd></label>
              </div>
              <div class="is-narrow">
                  <input class="active is-checkradio" type="radio" id="mc" :value="3" v-model="active" :disabled="activeset">
                  <label for="mc"><kbd>MNLP + MC</kbd></label>
              </div>
              <div class="is-narrow">
                  <input class="active is-checkradio" type="radio" id="bb" :value="4" v-model="active" :disabled="activeset">
                  <label for="bb"><kbd>MNLP + BB</kbd></label>
              </div>
          </div>
          <div class="field is-horizontal bordered-row tooltip-content">
              <div class="tooltip-content column is-3 mb0">
                  <label class="label column is-12 mb0">Batch Size</label>
                  <div class="help-tip">
                      <p>Something about batch size explanation</p>
                  </div>
              </div>

              <div class="control column is-5">
                  <input class="active input" type="number" placeholder="# of instances per online learning (Default: 10)" v-model.number="batch" :disabled="activeset">
              </div>
          </div>

          <div class="field is-horizontal bordered-row tooltip-content">
              <div class="tooltip-content column is-3 mb0">
                  <label class="label column is-12 mb0">Epoch per batch</label>
                  <div class="help-tip">
                      <p>Something about epoch explanation</p>
                  </div>
              </div>

              <div class="control column is-5">
                  <input class="active input" type="number" placeholder="Epoch per each learning (Default: 5)" v-model.number="epoch" :disabled="activeset">
              </div>
          </div>


          <div class="field is-horizontal bordered-row tooltip-content">
              <div class="tooltip-content column is-3 mb0">
                  <label class="label column is-12 mb0">Acquire size</label>
                  <div class="help-tip">
                      <p>Something about acquire size explanation</p>
                  </div>
              </div>

              <div class="control column is-5">
                  <input class="active input" type="number" placeholder="Acquire size for active learning (Default: 5)" v-model.number="acquire" :disabled="activeset==true || active==1">
              </div>
          </div>

      </div>
      <div class="field is-grouped">
          <div class="control">
              <button class="btn btn--icon-disclosure" @click="save()">SAVE</button>
          </div>
          <div class="control">
              <button class="btn btn--icon-disclosure" @click="reset()">RESET</button>
          </div>
      </div>
  </div>
</div>
{% endblock %}
{% block footer %}
<script src="{% static 'bundle/setting.js' %}"></script>
{% endblock %}